<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康档案管理系统</title>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://fastly.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            background-color: #222; /* 整体背景为暗色 */
            color: #eee;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 20px;
        }

        h1 {
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            margin-bottom: 20px;
        }

        .tab-container {
            display: flex;
            width: 90%;
            max-width: 1200px;
            background-color: #333; /* tab 容器背景为暗色 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            padding: 20px;
        }

        .nav-tabs {
            flex-direction: column;
            border-bottom: none;
            margin-right: 20px;
        }

        .nav-link {
            color: #eee;
            border: none;
            border-radius: 5px;
            margin: 5px 0;
            transition: background-color 0.3s ease;
        }

        .nav-link.active {
            background-color: #007bff;
            color: #fff;
        }

        .tab-content {
            flex: 1;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #444; /* 表格分隔线颜色 */
        }

        th {
            background-color: #444; /* 表头背景色 */
        }

        /* 美化按钮样式 */
        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: #28a745;
            border-color: #28a745;
        }

        .btn-primary:hover {
            background-color: #218838;
            border-color: #1e7e34;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-warning {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #222;
        }

        .btn-warning:hover {
            background-color: #e0a800;
            border-color: #d39e00;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-danger {
            background-color: #dc3545;
            border-color: #dc3545;
        }

        .btn-danger:hover {
            background-color: #c82333;
            border-color: #bd2130;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        /* 输入框样式 */
        input[type="text"],
        input[type="number"],
        input[type="date"] {
            background-color: #444;
            color: #eee;
            border: 1px solid #555;
        }

        /* 模态框样式 */
        .modal-content {
            background-color: #333;
            color: #eee;
        }

        .modal-header {
            border-bottom: 1px solid #444;
        }

        .modal-footer {
            border-top: 1px solid #444;
        }

        /* 图表容器背景 */
        #myPieChart {
            background-color: #333;
        }
    </style>
</head>

<body>
    <h1>健康档案管理系统</h1>
    <div class="tab-container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
                    role="tab" aria-controls="home" aria-selected="true">首页</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="patient-tab" data-bs-toggle="tab" data-bs-target="#patient" type="button"
                    role="tab" aria-controls="patient" aria-selected="false">患者管理</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="medical-record-tab" data-bs-toggle="tab" data-bs-target="#medical-record"
                    type="button" role="tab" aria-controls="medical-record" aria-selected="false">病历管理</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="vaccination-tab" data-bs-toggle="tab" data-bs-target="#vaccination"
                    type="button" role="tab" aria-controls="vaccination" aria-selected="false">疫苗接种管理</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="health-check-tab" data-bs-toggle="tab" data-bs-target="#health-check"
                    type="button" role="tab" aria-controls="health-check" aria-selected="false">健康检查管理</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="drug-prescription-tab" data-bs-toggle="tab" data-bs-target="#drug-prescription"
                    type="button" role="tab" aria-controls="drug-prescription" aria-selected="false">药品处方管理</button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <h2>首页</h2>
                <canvas id="myPieChart" width="400" height="200"></canvas>
            </div>
            <div class="tab-pane fade" id="patient" role="tabpanel" aria-labelledby="patient-tab">
                <h2>患者管理</h2>
                <input type="text" id="patientSearch" placeholder="搜索患者姓名" oninput="searchPatients()">
                <button class="btn btn-primary" onclick="openAddPatientModal()">添加患者</button>
                <table id="patientTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>联系方式</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="medical-record" role="tabpanel" aria-labelledby="medical-record-tab">
                <h2>病历管理</h2>
                <input type="text" id="medicalRecordSearch" placeholder="搜索病历编号" oninput="searchMedicalRecords()">
                <button class="btn btn-primary" onclick="openAddMedicalRecordModal()">添加病历</button>
                <table id="medicalRecordTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>病历编号</th>
                            <th>患者姓名</th>
                            <th>诊断结果</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="vaccination" role="tabpanel" aria-labelledby="vaccination-tab">
                <h2>疫苗接种管理</h2>
                <input type="text" id="vaccinationSearch" placeholder="搜索疫苗名称" oninput="searchVaccinations()">
                <button class="btn btn-primary" onclick="openAddVaccinationModal()">添加疫苗接种记录</button>
                <table id="vaccinationTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>疫苗名称</th>
                            <th>患者姓名</th>
                            <th>接种时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="health-check" role="tabpanel" aria-labelledby="health-check-tab">
                <h2>健康检查管理</h2>
                <input type="text" id="healthCheckSearch" placeholder="搜索检查日期" oninput="searchHealthChecks()">
                <button class="btn btn-primary" onclick="openAddHealthCheckModal()">添加健康检查记录</button>
                <table id="healthCheckTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>检查日期</th>
                            <th>患者姓名</th>
                            <th>检查项目</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="drug-prescription" role="tabpanel" aria-labelledby="drug-prescription-tab">
                <h2>药品处方管理</h2>
                <input type="text" id="drugPrescriptionSearch" placeholder="搜索处方编号" oninput="searchDrugPrescriptions()">
                <button class="btn btn-primary" onclick="openAddDrugPrescriptionModal()">添加药品处方</button>
                <table id="drugPrescriptionTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>处方编号</th>
                            <th>患者姓名</th>
                            <th>药品名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 患者添加/编辑模态框 -->
    <div class="modal fade" id="patientModal" tabindex="-1" aria-labelledby="patientModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="patientModalLabel">添加/编辑患者</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="patientId">
                    <label for="patientName">姓名</label>
                    <input type="text" id="patientName" class="form-control">
                    <label for="patientAge">年龄</label>
                    <input type="number" id="patientAge" class="form-control">
                    <label for="patientContact">联系方式</label>
                    <input type="text" id="patientContact" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="savePatient()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 病历添加/编辑模态框 -->
    <div class="modal fade" id="medicalRecordModal" tabindex="-1" aria-labelledby="medicalRecordModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="medicalRecordModalLabel">添加/编辑病历</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="medicalRecordId">
                    <label for="medicalRecordNumber">病历编号</label>
                    <input type="text" id="medicalRecordNumber" class="form-control">
                    <label for="medicalRecordPatientName">患者姓名</label>
                    <input type="text" id="medicalRecordPatientName" class="form-control">
                    <label for="medicalRecordDiagnosis">诊断结果</label>
                    <input type="text" id="medicalRecordDiagnosis" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveMedicalRecord()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 疫苗接种添加/编辑模态框 -->
    <div class="modal fade" id="vaccinationModal" tabindex="-1" aria-labelledby="vaccinationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="vaccinationModalLabel">添加/编辑疫苗接种记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="vaccinationId">
                    <label for="vaccinationName">疫苗名称</label>
                    <input type="text" id="vaccinationName" class="form-control">
                    <label for="vaccinationPatientName">患者姓名</label>
                    <input type="text" id="vaccinationPatientName" class="form-control">
                    <label for="vaccinationDate">接种时间</label>
                    <input type="date" id="vaccinationDate" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveVaccination()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 健康检查添加/编辑模态框 -->
    <div class="modal fade" id="healthCheckModal" tabindex="-1" aria-labelledby="healthCheckModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="healthCheckModalLabel">添加/编辑健康检查记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="healthCheckId">
                    <label for="healthCheckDate">检查日期</label>
                    <input type="date" id="healthCheckDate" class="form-control">
                    <label for="healthCheckPatientName">患者姓名</label>
                    <input type="text" id="healthCheckPatientName" class="form-control">
                    <label for="healthCheckItems">检查项目</label>
                    <input type="text" id="healthCheckItems" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveHealthCheck()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 药品处方添加/编辑模态框 -->
    <div class="modal fade" id="drugPrescriptionModal" tabindex="-1" aria-labelledby="drugPrescriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="drugPrescriptionModalLabel">添加/编辑药品处方</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="drugPrescriptionId">
                    <label for="drugPrescriptionNumber">处方编号</label>
                    <input type="text" id="drugPrescriptionNumber" class="form-control">
                    <label for="drugPrescriptionPatientName">患者姓名</label>
                    <input type="text" id="drugPrescriptionPatientName" class="form-control">
                    <label for="drugPrescriptionDrugName">药品名称</label>
                    <input type="text" id="drugPrescriptionDrugName" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveDrugPrescription()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化表格和图表
        function init() {
            initPatients();
            initMedicalRecords();
            initVaccinations();
            initHealthChecks();
            initDrugPrescriptions();
            initChart();
        }

        // 患者管理
        function initPatients() {
            let patients = JSON.parse(localStorage.getItem('patients')) || [
                { id: 1, name: '患者1', age: 25, contact: '13800138001' },
                { id: 2, name: '患者2', age: 30, contact: '13800138002' },
                { id: 3, name: '患者3', age: 35, contact: '13800138003' },
                { id: 4, name: '患者4', age: 40, contact: '13800138004' },
                { id: 5, name: '患者5', age: 45, contact: '13800138005' },
                { id: 6, name: '患者6', age: 50, contact: '13800138006' },
                { id: 7, name: '患者7', age: 55, contact: '13800138007' },
                { id: 8, name: '患者8', age: 60, contact: '13800138008' },
                { id: 9, name: '患者9', age: 65, contact: '13800138009' },
                { id: 10, name: '患者10', age: 70, contact: '13800138010' }
            ];
            localStorage.setItem('patients', JSON.stringify(patients));
            renderPatients(patients);
        }

        function renderPatients(patients) {
            let patientTable = document.getElementById('patientTable').getElementsByTagName('tbody')[0];
            patientTable.innerHTML = '';
            patients.forEach(patient => {
                let row = patientTable.insertRow();
                row.insertCell(0).textContent = patient.id;
                row.insertCell(1).textContent = patient.name;
                row.insertCell(2).textContent = patient.age;
                row.insertCell(3).textContent = patient.contact;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditPatientModal(${patient.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deletePatient(${patient.id})">删除</button>`;
            });
        }

        function openAddPatientModal() {
            document.getElementById('patientId').value = '';
            document.getElementById('patientName').value = '';
            document.getElementById('patientAge').value = '';
            document.getElementById('patientContact').value = '';
            let patientModal = new bootstrap.Modal(document.getElementById('patientModal'));
            patientModal.show();
        }

        function openEditPatientModal(id) {
            let patients = JSON.parse(localStorage.getItem('patients'));
            let patient = patients.find(p => p.id === id);
            document.getElementById('patientId').value = patient.id;
            document.getElementById('patientName').value = patient.name;
            document.getElementById('patientAge').value = patient.age;
            document.getElementById('patientContact').value = patient.contact;
            let patientModal = new bootstrap.Modal(document.getElementById('patientModal'));
            patientModal.show();
        }

        function savePatient() {
            let patients = JSON.parse(localStorage.getItem('patients'));
            let id = document.getElementById('patientId').value;
            let name = document.getElementById('patientName').value;
            let age = document.getElementById('patientAge').value;
            let contact = document.getElementById('patientContact').value;
            if (id) {
                let index = patients.findIndex(p => p.id === parseInt(id));
                patients[index] = { id: parseInt(id), name, age, contact };
            } else {
                let newId = patients.length > 0 ? Math.max(...patients.map(p => p.id)) + 1 : 1;
                patients.push({ id: newId, name, age, contact });
            }
            localStorage.setItem('patients', JSON.stringify(patients));
            renderPatients(patients);
            let patientModal = bootstrap.Modal.getInstance(document.getElementById('patientModal'));
            patientModal.hide();
        }

        function deletePatient(id) {
            let patients = JSON.parse(localStorage.getItem('patients'));
            patients = patients.filter(p => p.id!== id);
            localStorage.setItem('patients', JSON.stringify(patients));
            renderPatients(patients);
        }

        function searchPatients() {
            let searchTerm = document.getElementById('patientSearch').value.toLowerCase();
            let patients = JSON.parse(localStorage.getItem('patients'));
            let filteredPatients = patients.filter(patient => patient.name.toLowerCase().includes(searchTerm));
            renderPatients(filteredPatients);
        }

        // 病历管理
        function initMedicalRecords() {
            let medicalRecords = JSON.parse(localStorage.getItem('medicalRecords')) || [
                { id: 1, number: 'MR001', patientName: '患者1', diagnosis: '感冒' },
                { id: 2, number: 'MR002', patientName: '患者2', diagnosis: '发烧' },
                { id: 3, number: 'MR003', patientName: '患者3', diagnosis: '咳嗽' },
                { id: 4, number: 'MR004', patientName: '患者4', diagnosis: '胃炎' },
                { id: 5, number: 'MR005', patientName: '患者5', diagnosis: '肺炎' },
                { id: 6, number: 'MR006', patientName: '患者6', diagnosis: '高血压' },
                { id: 7, number: 'MR007', patientName: '患者7', diagnosis: '糖尿病' },
                { id: 8, number: 'MR008', patientName: '患者8', diagnosis: '心脏病' },
                { id: 9, number: 'MR009', patientName: '患者9', diagnosis: '关节炎' },
                { id: 10, number: 'MR010', patientName: '患者10', diagnosis: '偏头痛' }
            ];
            localStorage.setItem('medicalRecords', JSON.stringify(medicalRecords));
            renderMedicalRecords(medicalRecords);
        }

        function renderMedicalRecords(medicalRecords) {
            let medicalRecordTable = document.getElementById('medicalRecordTable').getElementsByTagName('tbody')[0];
            medicalRecordTable.innerHTML = '';
            medicalRecords.forEach(medicalRecord => {
                let row = medicalRecordTable.insertRow();
                row.insertCell(0).textContent = medicalRecord.id;
                row.insertCell(1).textContent = medicalRecord.number;
                row.insertCell(2).textContent = medicalRecord.patientName;
                row.insertCell(3).textContent = medicalRecord.diagnosis;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditMedicalRecordModal(${medicalRecord.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteMedicalRecord(${medicalRecord.id})">删除</button>`;
            });
        }

        function openAddMedicalRecordModal() {
            document.getElementById('medicalRecordId').value = '';
            document.getElementById('medicalRecordNumber').value = '';
            document.getElementById('medicalRecordPatientName').value = '';
            document.getElementById('medicalRecordDiagnosis').value = '';
            let medicalRecordModal = new bootstrap.Modal(document.getElementById('medicalRecordModal'));
            medicalRecordModal.show();
        }

        function openEditMedicalRecordModal(id) {
            let medicalRecords = JSON.parse(localStorage.getItem('medicalRecords'));
            let medicalRecord = medicalRecords.find(mr => mr.id === id);
            document.getElementById('medicalRecordId').value = medicalRecord.id;
            document.getElementById('medicalRecordNumber').value = medicalRecord.number;
            document.getElementById('medicalRecordPatientName').value = medicalRecord.patientName;
            document.getElementById('medicalRecordDiagnosis').value = medicalRecord.diagnosis;
            let medicalRecordModal = new bootstrap.Modal(document.getElementById('medicalRecordModal'));
            medicalRecordModal.show();
        }

        function saveMedicalRecord() {
            let medicalRecords = JSON.parse(localStorage.getItem('medicalRecords'));
            let id = document.getElementById('medicalRecordId').value;
            let number = document.getElementById('medicalRecordNumber').value;
            let patientName = document.getElementById('medicalRecordPatientName').value;
            let diagnosis = document.getElementById('medicalRecordDiagnosis').value;
            if (id) {
                let index = medicalRecords.findIndex(mr => mr.id === parseInt(id));
                medicalRecords[index] = { id: parseInt(id), number, patientName, diagnosis };
            } else {
                let newId = medicalRecords.length > 0 ? Math.max(...medicalRecords.map(mr => mr.id)) + 1 : 1;
                medicalRecords.push({ id: newId, number, patientName, diagnosis });
            }
            localStorage.setItem('medicalRecords', JSON.stringify(medicalRecords));
            renderMedicalRecords(medicalRecords);
            let medicalRecordModal = bootstrap.Modal.getInstance(document.getElementById('medicalRecordModal'));
            medicalRecordModal.hide();
        }

        function deleteMedicalRecord(id) {
            let medicalRecords = JSON.parse(localStorage.getItem('medicalRecords'));
            medicalRecords = medicalRecords.filter(mr => mr.id!== id);
            localStorage.setItem('medicalRecords', JSON.stringify(medicalRecords));
            renderMedicalRecords(medicalRecords);
        }

        function searchMedicalRecords() {
            let searchTerm = document.getElementById('medicalRecordSearch').value.toLowerCase();
            let medicalRecords = JSON.parse(localStorage.getItem('medicalRecords'));
            let filteredMedicalRecords = medicalRecords.filter(medicalRecord => medicalRecord.number.toLowerCase().includes(searchTerm));
            renderMedicalRecords(filteredMedicalRecords);
        }

        // 疫苗接种管理
        function initVaccinations() {
            let vaccinations = JSON.parse(localStorage.getItem('vaccinations')) || [
                { id: 1, name: '流感疫苗', patientName: '患者1', date: '2024-01-01' },
                { id: 2, name: '新冠疫苗', patientName: '患者2', date: '2024-01-02' },
                { id: 3, name: '乙肝疫苗', patientName: '患者3', date: '2024-01-03' },
                { id: 4, name: '肺炎疫苗', patientName: '患者4', date: '2024-01-04' },
                { id: 5, name: 'HPV疫苗', patientName: '患者5', date: '2024-01-05' },
                { id: 6, name: '狂犬疫苗', patientName: '患者6', date: '2024-01-06' },
                { id: 7, name: '水痘疫苗', patientName: '患者7', date: '2024-01-07' },
                { id: 8, name: '卡介苗', patientName: '患者8', date: '2024-01-08' },
                { id: 9, name: '脊髓灰质炎疫苗', patientName: '患者9', date: '2024-01-09' },
                { id: 10, name: '百白破疫苗', patientName: '患者10', date: '2024-01-10' }
            ];
            localStorage.setItem('vaccinations', JSON.stringify(vaccinations));
            renderVaccinations(vaccinations);
        }

        function renderVaccinations(vaccinations) {
            let vaccinationTable = document.getElementById('vaccinationTable').getElementsByTagName('tbody')[0];
            vaccinationTable.innerHTML = '';
            vaccinations.forEach(vaccination => {
                let row = vaccinationTable.insertRow();
                row.insertCell(0).textContent = vaccination.id;
                row.insertCell(1).textContent = vaccination.name;
                row.insertCell(2).textContent = vaccination.patientName;
                row.insertCell(3).textContent = vaccination.date;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditVaccinationModal(${vaccination.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteVaccination(${vaccination.id})">删除</button>`;
            });
        }

        function openAddVaccinationModal() {
            document.getElementById('vaccinationId').value = '';
            document.getElementById('vaccinationName').value = '';
            document.getElementById('vaccinationPatientName').value = '';
            document.getElementById('vaccinationDate').value = '';
            let vaccinationModal = new bootstrap.Modal(document.getElementById('vaccinationModal'));
            vaccinationModal.show();
        }

        function openEditVaccinationModal(id) {
            let vaccinations = JSON.parse(localStorage.getItem('vaccinations'));
            let vaccination = vaccinations.find(v => v.id === id);
            document.getElementById('vaccinationId').value = vaccination.id;
            document.getElementById('vaccinationName').value = vaccination.name;
            document.getElementById('vaccinationPatientName').value = vaccination.patientName;
            document.getElementById('vaccinationDate').value = vaccination.date;
            let vaccinationModal = new bootstrap.Modal(document.getElementById('vaccinationModal'));
            vaccinationModal.show();
        }

        function saveVaccination() {
            let vaccinations = JSON.parse(localStorage.getItem('vaccinations'));
            let id = document.getElementById('vaccinationId').value;
            let name = document.getElementById('vaccinationName').value;
            let patientName = document.getElementById('vaccinationPatientName').value;
            let date = document.getElementById('vaccinationDate').value;
            if (id) {
                let index = vaccinations.findIndex(v => v.id === parseInt(id));
                vaccinations[index] = { id: parseInt(id), name, patientName, date };
            } else {
                let newId = vaccinations.length > 0 ? Math.max(...vaccinations.map(v => v.id)) + 1 : 1;
                vaccinations.push({ id: newId, name, patientName, date });
            }
            localStorage.setItem('vaccinations', JSON.stringify(vaccinations));
            renderVaccinations(vaccinations);
            let vaccinationModal = bootstrap.Modal.getInstance(document.getElementById('vaccinationModal'));
            vaccinationModal.hide();
        }

        function deleteVaccination(id) {
            let vaccinations = JSON.parse(localStorage.getItem('vaccinations'));
            vaccinations = vaccinations.filter(v => v.id!== id);
            localStorage.setItem('vaccinations', JSON.stringify(vaccinations));
            renderVaccinations(vaccinations);
        }

        function searchVaccinations() {
            let searchTerm = document.getElementById('vaccinationSearch').value.toLowerCase();
            let vaccinations = JSON.parse(localStorage.getItem('vaccinations'));
            let filteredVaccinations = vaccinations.filter(vaccination => vaccination.name.toLowerCase().includes(searchTerm));
            renderVaccinations(filteredVaccinations);
        }

        // 健康检查管理
        function initHealthChecks() {
            let healthChecks = JSON.parse(localStorage.getItem('healthChecks')) || [
                { id: 1, date: '2024-01-01', patientName: '患者1', items: '血常规、尿常规' },
                { id: 2, date: '2024-01-02', patientName: '患者2', items: '肝功能、肾功能' },
                { id: 3, date: '2024-01-03', patientName: '患者3', items: '心电图、胸透' },
                { id: 4, date: '2024-01-04', patientName: '患者4', items: '血脂、血糖' },
                { id: 5, date: '2024-01-05', patientName: '患者5', items: '眼科、口腔科' },
                { id: 6, date: '2024-01-06', patientName: '患者6', items: 'B超、CT' },
                { id: 7, date: '2024-01-07', patientName: '患者7', items: '血压、心率' },
                { id: 8, date: '2024-01-08', patientName: '患者8', items: '肺功能、骨密度' },
                { id: 9, date: '2024-01-09', patientName: '患者9', items: '胃镜、肠镜' },
                { id: 10, date: '2024-01-10', patientName: '患者10', items: '甲状腺功能、性激素' }
            ];
            localStorage.setItem('healthChecks', JSON.stringify(healthChecks));
            renderHealthChecks(healthChecks);
        }

        function renderHealthChecks(healthChecks) {
            let healthCheckTable = document.getElementById('healthCheckTable').getElementsByTagName('tbody')[0];
            healthCheckTable.innerHTML = '';
            healthChecks.forEach(healthCheck => {
                let row = healthCheckTable.insertRow();
                row.insertCell(0).textContent = healthCheck.id;
                row.insertCell(1).textContent = healthCheck.date;
                row.insertCell(2).textContent = healthCheck.patientName;
                row.insertCell(3).textContent = healthCheck.items;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditHealthCheckModal(${healthCheck.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteHealthCheck(${healthCheck.id})">删除</button>`;
            });
        }

        function openAddHealthCheckModal() {
            document.getElementById('healthCheckId').value = '';
            document.getElementById('healthCheckDate').value = '';
            document.getElementById('healthCheckPatientName').value = '';
            document.getElementById('healthCheckItems').value = '';
            let healthCheckModal = new bootstrap.Modal(document.getElementById('healthCheckModal'));
            healthCheckModal.show();
        }

        function openEditHealthCheckModal(id) {
            let healthChecks = JSON.parse(localStorage.getItem('healthChecks'));
            let healthCheck = healthChecks.find(hc => hc.id === id);
            document.getElementById('healthCheckId').value = healthCheck.id;
            document.getElementById('healthCheckDate').value = healthCheck.date;
            document.getElementById('healthCheckPatientName').value = healthCheck.patientName;
            document.getElementById('healthCheckItems').value = healthCheck.items;
            let healthCheckModal = new bootstrap.Modal(document.getElementById('healthCheckModal'));
            healthCheckModal.show();
        }

        function saveHealthCheck() {
            let healthChecks = JSON.parse(localStorage.getItem('healthChecks'));
            let id = document.getElementById('healthCheckId').value;
            let date = document.getElementById('healthCheckDate').value;
            let patientName = document.getElementById('healthCheckPatientName').value;
            let items = document.getElementById('healthCheckItems').value;
            if (id) {
                let index = healthChecks.findIndex(hc => hc.id === parseInt(id));
                healthChecks[index] = { id: parseInt(id), date, patientName, items };
            } else {
                let newId = healthChecks.length > 0 ? Math.max(...healthChecks.map(hc => hc.id)) + 1 : 1;
                healthChecks.push({ id: newId, date, patientName, items });
            }
            localStorage.setItem('healthChecks', JSON.stringify(healthChecks));
            renderHealthChecks(healthChecks);
            let healthCheckModal = bootstrap.Modal.getInstance(document.getElementById('healthCheckModal'));
            healthCheckModal.hide();
        }

        function deleteHealthCheck(id) {
            let healthChecks = JSON.parse(localStorage.getItem('healthChecks'));
            healthChecks = healthChecks.filter(hc => hc.id!== id);
            localStorage.setItem('healthChecks', JSON.stringify(healthChecks));
            renderHealthChecks(healthChecks);
        }

        function searchHealthChecks() {
            let searchTerm = document.getElementById('healthCheckSearch').value.toLowerCase();
            let healthChecks = JSON.parse(localStorage.getItem('healthChecks'));
            let filteredHealthChecks = healthChecks.filter(healthCheck => healthCheck.date.toLowerCase().includes(searchTerm));
            renderHealthChecks(filteredHealthChecks);
        }

        // 药品处方管理
        function initDrugPrescriptions() {
            let drugPrescriptions = JSON.parse(localStorage.getItem('drugPrescriptions')) || [
                { id: 1, number: 'DP001', patientName: '患者1', drugName: '感冒药' },
                { id: 2, number: 'DP002', patientName: '患者2', drugName: '退烧药' },
                { id: 3, number: 'DP003', patientName: '患者3', drugName: '止咳药' },
                { id: 4, number: 'DP004', patientName: '患者4', drugName: '胃药' },
                { id: 5, number: 'DP005', patientName: '患者5', drugName: '肺炎药' },
                { id: 6, number: 'DP006', patientName: '患者6', drugName: '降压药' },
                { id: 7, number: 'DP007', patientName: '患者7', drugName: '降糖药' },
                { id: 8, number: 'DP008', patientName: '患者8', drugName: '心脏病药' },
                { id: 9, number: 'DP009', patientName: '患者9', drugName: '关节炎药' },
                { id: 10, number: 'DP010', patientName: '患者10', drugName: '头痛药' }
            ];
            localStorage.setItem('drugPrescriptions', JSON.stringify(drugPrescriptions));
            renderDrugPrescriptions(drugPrescriptions);
        }

        function renderDrugPrescriptions(drugPrescriptions) {
            let drugPrescriptionTable = document.getElementById('drugPrescriptionTable').getElementsByTagName('tbody')[0];
            drugPrescriptionTable.innerHTML = '';
            drugPrescriptions.forEach(drugPrescription => {
                let row = drugPrescriptionTable.insertRow();
                row.insertCell(0).textContent = drugPrescription.id;
                row.insertCell(1).textContent = drugPrescription.number;
                row.insertCell(2).textContent = drugPrescription.patientName;
                row.insertCell(3).textContent = drugPrescription.drugName;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditDrugPrescriptionModal(${drugPrescription.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteDrugPrescription(${drugPrescription.id})">删除</button>`;
            });
        }

        function openAddDrugPrescriptionModal() {
            document.getElementById('drugPrescriptionId').value = '';
            document.getElementById('drugPrescriptionNumber').value = '';
            document.getElementById('drugPrescriptionPatientName').value = '';
            document.getElementById('drugPrescriptionDrugName').value = '';
            let drugPrescriptionModal = new bootstrap.Modal(document.getElementById('drugPrescriptionModal'));
            drugPrescriptionModal.show();
        }

        function openEditDrugPrescriptionModal(id) {
            let drugPrescriptions = JSON.parse(localStorage.getItem('drugPrescriptions'));
            let drugPrescription = drugPrescriptions.find(dp => dp.id === id);
            document.getElementById('drugPrescriptionId').value = drugPrescription.id;
            document.getElementById('drugPrescriptionNumber').value = drugPrescription.number;
            document.getElementById('drugPrescriptionPatientName').value = drugPrescription.patientName;
            document.getElementById('drugPrescriptionDrugName').value = drugPrescription.drugName;
            let drugPrescriptionModal = new bootstrap.Modal(document.getElementById('drugPrescriptionModal'));
            drugPrescriptionModal.show();
        }

        function saveDrugPrescription() {
            let drugPrescriptions = JSON.parse(localStorage.getItem('drugPrescriptions'));
            let id = document.getElementById('drugPrescriptionId').value;
            let number = document.getElementById('drugPrescriptionNumber').value;
            let patientName = document.getElementById('drugPrescriptionPatientName').value;
            let drugName = document.getElementById('drugPrescriptionDrugName').value;
            if (id) {
                let index = drugPrescriptions.findIndex(dp => dp.id === parseInt(id));
                drugPrescriptions[index] = { id: parseInt(id), number, patientName, drugName };
            } else {
                let newId = drugPrescriptions.length > 0 ? Math.max(...drugPrescriptions.map(dp => dp.id)) + 1 : 1;
                drugPrescriptions.push({ id: newId, number, patientName, drugName });
            }
            localStorage.setItem('drugPrescriptions', JSON.stringify(drugPrescriptions));
            renderDrugPrescriptions(drugPrescriptions);
            let drugPrescriptionModal = bootstrap.Modal.getInstance(document.getElementById('drugPrescriptionModal'));
            drugPrescriptionModal.hide();
        }

        function deleteDrugPrescription(id) {
            let drugPrescriptions = JSON.parse(localStorage.getItem('drugPrescriptions'));
            drugPrescriptions = drugPrescriptions.filter(dp => dp.id!== id);
            localStorage.setItem('drugPrescriptions', JSON.stringify(drugPrescriptions));
            renderDrugPrescriptions(drugPrescriptions);
        }

        function searchDrugPrescriptions() {
            let searchTerm = document.getElementById('drugPrescriptionSearch').value.toLowerCase();
            let drugPrescriptions = JSON.parse(localStorage.getItem('drugPrescriptions'));
            let filteredDrugPrescriptions = drugPrescriptions.filter(drugPrescription => drugPrescription.number.toLowerCase().includes(searchTerm));
            renderDrugPrescriptions(filteredDrugPrescriptions);
        }

        // 初始化图表
        function initChart() {
            // 初始化饼图
            let ctxPie = document.getElementById('myPieChart').getContext('2d');
            let patients = JSON.parse(localStorage.getItem('patients')).length;
            let medicalRecords = JSON.parse(localStorage.getItem('medicalRecords')).length;
            let vaccinations = JSON.parse(localStorage.getItem('vaccinations')).length;
            let healthChecks = JSON.parse(localStorage.getItem('healthChecks')).length;
            let drugPrescriptions = JSON.parse(localStorage.getItem('drugPrescriptions')).length;
            new Chart(ctxPie, {
                type: 'pie',
                data: {
                    labels: ['患者数量', '病历数量', '疫苗接种数量', '健康检查数量', '药品处方数量'],
                    datasets: [{
                        label: '数据统计',
                        data: [patients, medicalRecords, vaccinations, healthChecks, drugPrescriptions],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 205, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 205, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {}
            });
        }

        // 页面加载完成后初始化
        window.onload = function () {
            init();
        };
    </script>
</body>

</html>